<template>
  <div class="big">
    <div class="header">
      <div class="title">
        <span>退货商品</span>
      </div>
      <div>
        <el-table :data="data" style="width: 100%" border>
          <el-table-column prop="productPic" label="商品图片" width="180">
            <template #default="{ row }">
              <!-- :preview-src-list="row.productPic" -->
              <el-image
                style="width: 100px; height: 100px"
                :src="row.productPic"
                :zoom-rate="1.2"
                :initial-index="4"
                fit="cover"
              />
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" width="180">
            <template #default="{ row }">
              <div>{{ row.productName }}</div>
              <div>品牌:{{ row.productBrand }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="productPrice" label="价格/货号" width="220">
            <template #default="{ row }">
              <div>价格:{{ moneyFormat(row.productPrice) }}</div>
              <div>货号:{{ row.orderSn }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="productAttr" label="属性" width="220">
            <template #default="{ row }">
              <div>
                {{ row.productAttr }}
              </div>
            </template>
          </el-table-column>
          <!-- productQuantity -->
          <el-table-column prop="address" label="数量">
            <template #default="{ row }">
              <div>
                {{ row.productCount }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="小计">
            <template #default="{ row }">
              <div>
                {{ moneyFormat(row.productPrice) }}
              </div>
            </template>
            <!-- productPrice -->
          </el-table-column>
        </el-table>
        <div class="total">
          合计:
          <span>{{
            "  " +
            "¥" +
            "  " +
            data
              .reduce((prev, cur) => {
                return prev + cur.productPrice;
              }, 0)
              .toFixed(2)
          }}</span>
        </div>
      </div>
    </div>
    <div class="body">
      <!-- 第一个表格 -->
      <div class="box1">
        <el-descriptions title="服务单信息" :column="1" border>
          <el-descriptions-item
            label="服务单号"
            label-align="left"
            align="left"
            label-class-name="my-label"
            class-name="my-content"
            width="5px"
            >{{ tableData?.id }}</el-descriptions-item
          >
          <el-descriptions-item
            label="申请状态"
            label-align="left"
            align="left"
            >{{
              tableData?.status === 1 ? "待处理" : "已完成"
            }}</el-descriptions-item
          >
          <el-descriptions-item
            label="订单编号"
            label-align="left"
            align="left"
            >{{ tableData?.orderSn }}</el-descriptions-item
          >
          <el-descriptions-item
            label="申请时间"
            label-align="left"
            align="left"
          >
            {{ dateFormat(tableData?.createTime!) }}
          </el-descriptions-item>
          <el-descriptions-item
            label="用户账号"
            label-align="left"
            align="left"
            >{{ tableData?.memberUsername }}</el-descriptions-item
          >
          <el-descriptions-item
            label="联系人"
            label-align="left"
            align="left"
            >{{ tableData?.companyAddress?.name }}</el-descriptions-item
          >
          <el-descriptions-item
            label="联系电话"
            label-align="left"
            align="left"
            >{{ tableData?.companyAddress?.phone }}</el-descriptions-item
          >
          <el-descriptions-item
            label="退货原因"
            label-align="left"
            align="left"
            >{{ tableData?.reason }}</el-descriptions-item
          >
          <el-descriptions-item
            label="问题描述"
            label-align="left"
            align="left"
            >{{ tableData?.description }}</el-descriptions-item
          >
          <el-descriptions-item
            label="凭证图片"
            label-align="left"
            align="left"
          >
            <el-image
              style="width: 100px; height: 100px"
              :src="tableData?.productPic"
              :zoom-rate="1.2"
              :initial-index="4"
              fit="cover"
            />
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 第二个表格 -->
      <div class="box2">
        <el-descriptions :column="1" border>
          <el-descriptions-item
            label="订单金额"
            label-align="left"
            align="left"
            label-class-name="my-label"
            class-name="my-content"
            width="5px"
            >{{
              moneyFormat(tableData?.productRealPrice!)
            }}</el-descriptions-item
          >
          <el-descriptions-item
            label="确认退款金额"
            label-align="left"
            align="left"
          >
            <!-- <el-input v-model="tableData?.returnAmount" disabled /> -->
            <div class="totalInput">
              <span>¥</span>
              <el-input :placeholder="tableData?.returnAmount" disabled />
            </div>
          </el-descriptions-item>
          <el-descriptions-item
            label="选择收货点"
            label-align="left"
            align="left"
          >
            <el-select
              v-model="value"
              class="m-2"
              placeholder="Select"
              size="large"
              disabled
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item
            label="收货人姓名"
            label-align="left"
            align="left"
          >
            {{ tableData?.companyAddress?.name }}
          </el-descriptions-item>
          <el-descriptions-item label="所在区域" label-align="left" align="left"
            >{{ tableData?.companyAddress?.province }}
            {{ tableData?.companyAddress?.region }}</el-descriptions-item
          >
          <el-descriptions-item
            label="详细地址"
            label-align="left"
            align="left"
            >{{
              tableData?.companyAddress?.detailAddress
            }}</el-descriptions-item
          >
          <el-descriptions-item
            label="联系电话"
            label-align="left"
            align="left"
            >{{ tableData?.companyAddress?.phone }}</el-descriptions-item
          >
        </el-descriptions>
      </div>
      <!-- 第三个表格 -->
      <div class="box3">
        <el-descriptions :column="1" border>
          <el-descriptions-item
            label="处理人员"
            label-align="left"
            align="left"
            label-class-name="my-label"
            class-name="my-content"
            width="5px"
            >{{ tableData?.handleMan }}</el-descriptions-item
          >
          <el-descriptions-item
            label="处理时间"
            label-align="left"
            align="left"
            >{{ dateFormat(tableData?.handleTime!) }}</el-descriptions-item
          >
          <el-descriptions-item
            label="处理备注"
            label-align="left"
            align="left"
            >{{ tableData?.handleNote }}</el-descriptions-item
          >
        </el-descriptions>
      </div>
      <!-- 第四个表格 -->
      <div class="box4">
        <el-descriptions :column="1" border>
          <el-descriptions-item
            label="收货人员"
            label-align="left"
            align="left"
            label-class-name="my-label"
            class-name="my-content"
            width="5px"
            >{{ tableData?.handleMan }}</el-descriptions-item
          >
          <el-descriptions-item
            label="收货时间"
            label-align="left"
            align="left"
            >{{ dateFormat(tableData?.receiveTime!) }}</el-descriptions-item
          >
          <el-descriptions-item
            label="收货备注"
            label-align="left"
            align="left"
            >{{ tableData?.receiveNote! }}</el-descriptions-item
          >
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { dateFormat } from "@/utils";
import { moneyFormat } from "@/utils";
import { orderSalesDetailsApi } from "./api/api";
import { ref, reactive } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const data = ref<IOrderSalesList[]>([]);
// const newData = reactive({})
const tableData = ref<IOrderSalesList>();
if (route.query.id) {
  orderSalesDetailsApi(parseInt(route.query.id as string)).then((res) => {
    console.log(res);
    data.value.push(res.data);
    tableData.value = res.data;
    // data.value.forEach((item) => {
    //   Object.assign(tableData, item);
    // });
  });
}
const value = ref("1");

const options = [
  {
    value: "1",
    label: "北京发货点",
  },
];
</script>

<style scoped lang="less">
.big {
  width: 1078px;
  margin: 100px auto 0;
  // border: 1px solid #ebeef5;
  .header {
    padding: 20px;
    border: 1px solid #ebeef5;
    .title {
      margin-bottom: 20px;
    }
  }
  .total {
    text-align: right;
    margin: 20px 20px 0 0;
    span {
      color: red;
    }
  }
}
// .my-label {
//   background: var(--el-color-success-light-9);
// }
// .my-content {
//   background: var(--el-color-danger-light-9);
// }
.body {
  border: 1px solid #ebeef5;
  margin-top: 20px;
  padding: 20px;
  .box1,
  .box2,
  .box3 {
    margin-bottom: 20px;
  }
}
:deep(.cell) {
  text-align: center;
}
.totalInput {
  width: 200px;
  display: flex;
  align-items: center;
  span {
    margin-right: 20px;
  }
}
</style>
